@import './normalize.css';
@import './config.scss';

body {
  // background-color: #e2e5d8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol';
  // background-color: #f4f6f9;
  background-color: #fafafa;
  // font-family: Roboto, Lato, sans-serif;
}
html {
  -webkit-tap-highlight-color: transparent;
}

.tyche-wrapper {
  display: flex;
  & > aside {
    flex: 1;
  }
  & > main {
    flex: 5;
  }
}

.ty-drawer {
  .demo-sider__nav {
    height: calc(100% - 20px);
    overflow-y: auto;
  }
}

.demo {
  &-layout-appBar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 101;
  }
  &-appBar,
  &-input,
  &-layout {
    .code-view-toolbar {
      margin-top: 12px;
    }
  }
  &-page {
    & > div {
      width: 90%;
      max-width: 820px;
      margin: 18px auto 0;
      .code-view-wrapper {
        border: 1px dashed #00000042;
        transition: border-color 0.3s linear;
        &:hover {
          border-color: #2196f3;
        }
      }
    }
    .markdown {
      h3 {
        margin-top: 46px;
        padding-left: 18px;
      }
    }

    .code-view {
      padding-right: 12px;
      padding-bottom: 0;
      padding-left: 12px;
    }

    .code-view-toolbar {
      button {
        margin-bottom: 0;
      }
      .ty-icon {
        margin: 0;
      }
    }
    .code-view-wrapper {
      .md {
        &-show {
          height: auto;
        }
      }
    }
  }
  &-buttons {
    button {
      margin-right: 24px;
      margin-bottom: 24px;
      vertical-align: middle;
    }
  }
  &-icon {
    .ty-icon {
      margin-right: 24px;
      margin-bottom: 16px;
      color: $--color-black-heavy;
      font-size: 18px;
    }
    .material-icons {
      font-size: 24px;
    }
  }
  &-grid {
    .gutter-box {
      color: #fff;
      font-size: 14px;
      text-align: center;
      background-color: #2196f3;
    }
    [class*='ty-row'] + [class*='ty-row'] {
      margin-top: 24px;
    }
    .ty-row,
    .ty-row-flex {
      color: $--color-white;
      text-align: center;
      .ty-col {
        line-height: 36px;
      }
      .ty-col:nth-child(odd) {
        background-color: $--color-primary-light;
      }
      .ty-col:nth-child(even) {
        background-color: $--color-primary;
      }
    }
    .ty-row {
      .ty-col.gutter-row {
        background-color: transparent;
        .gutter-box {
          background-color: $--color-primary;
        }
      }
    }
    .ty-row-flex,
    .row-responsive {
      background-color: $--color-white;
    }
    .code-view-toolbar {
      margin-top: 12px;
    }
    .row-align {
      .ty-row-flex {
        height: 70px;
      }
    }
  }
  &-layout {
    .ty-layout {
      overflow: hidden;
    }
    section + section {
      margin-top: 48px;
    }
    section {
      color: $--color-white;
      text-align: center;
      header,
      footer {
        background-color: $--color-primary-light;
      }
      aside {
        display: flex;
        flex: 0 0 200px;
        justify-content: center;
        align-items: center;
        background-color: rgba(16, 142, 233, 1);
      }
      main {
        min-height: 120px;
        line-height: 120px;
        background-color: $--color-primary;
      }
    }
    &-logo {
      width: 32px;
      height: 32px;
      background-image: url();
      background-repeat: no-repeat;
      background-size: contain;
      animation: rotation 30s linear infinite;
    }
  }
  &-sider--hide {
    display: none;
  }
  &-sider {
    position: fixed;
    height: 100vh;
    background-color: $--color-white;
    border-right: 1px solid $--color-gray;
  }
  &-content--hasSider {
    padding-left: 255px;
  }
  &-sider {
    overflow: hidden;
    &:hover {
      overflow-y: auto;
    }
    .ty-col-offset-3 {
      margin-left: 25px;
    }
    &__title {
      line-height: 36px;
    }
    &__nav {
      padding-top: 10px;
      padding-bottom: 64px;
      a {
        display: block;
        &.active .ty-btn__wrapper {
          color: $--color-primary;
        }
      }
      button {
        width: 100%;
        border-radius: 0;
        .ty-btn__wrapper {
          justify-content: flex-start;
          padding-left: 50px;
        }
      }
    }
  }
  &-drawer {
    button {
      margin-right: 24px;
      margin-bottom: 24px;
      vertical-align: middle;
    }
  }
  &-radio {
    padding: 20px;
  }
  &-checkbox {
    .ty-checkbox__group {
      display: block;
    }
  }
  &-message {
    .code-view {
      button {
        margin-right: 24px;
        margin-bottom: 24px;
        vertical-align: middle;
      }
    }
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
